<!-- 当前导航 -->
<div class="current-position">
  <!-- 面包屑 -->
  <nz-breadcrumb class="breadcrumb">
    <nz-breadcrumb-item>首页</nz-breadcrumb-item>
    <nz-breadcrumb-item>个人中心</nz-breadcrumb-item>
  </nz-breadcrumb>
  <h1 class="current-position-title">个人中心</h1>
</div>
<!-- 主体内容 -->
<div class="main-content">
  <nz-tabset>
    <!-- 展示 -->
    <nz-tab>
      <ng-template #nzTabHeading>
        <div class="title">用户信息</div>
      </ng-template>
      <div class="detailInfo" nz-row [nzGutter]="8">
        <div nz-col class="gutter-row" [nzSpan]="8">
          <div class="gutter-box">用户名：{{_user.UserName}}</div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="8">
          <div class="gutter-box">角色：{{_user.Role?.RoleName}}</div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="8">
          <div class="gutter-box">id：{{_user.UserId}}</div>
        </div>
      </div>
    </nz-tab>
    <!-- 修改密码 -->
    <nz-tab>
      <ng-template #nzTabHeading>
        <div class="title">修改密码</div>
      </ng-template>
      <div>
        <form class="pwdForm" nz-form [formGroup]="_passwordVaildForm" (ngSubmit)="_submitForm_pwd()">
          <!-- 当前密码 -->
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
              <label for="currentPassword" nz-form-item-required>当前密码</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
              <nz-input [nzSize]="'large'" [nzType]="'password'" formControlName="currentPassword" [nzId]="'currentPassword'"></nz-input>
              <div nz-form-explain *ngIf="_getPwdFormControl('currentPassword').dirty&&_getPwdFormControl('currentPassword').hasError('required')">请输入原密码!</div>
            </div>
          </div>
          <!-- 新密码 -->
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
              <label for="newPassword" nz-form-item-required>新密码</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
              <nz-input [nzSize]="'large'" [nzType]="'password'" formControlName="newPassword" [nzId]="'newPassword'"></nz-input>
              <div nz-form-explain *ngIf="_getPwdFormControl('newPassword').dirty&&_getPwdFormControl('newPassword').hasError('required')">请输入新密码!</div>
            </div>
          </div>
          <!-- 重复新密码 -->
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
              <label for="repeatNewPassword" nz-form-item-required>确认密码</label>
            </div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
              <nz-input [nzSize]="'large'" [nzType]="'password'" formControlName="repeatNewPassword" [nzId]="'repeatNewPassword'"></nz-input>
              <div nz-form-explain *ngIf="_getPwdFormControl('repeatNewPassword').dirty&&_getPwdFormControl('repeatNewPassword').hasError('required')">请输重复新密码!</div>
              <div nz-form-explain *ngIf="_getPwdFormControl('repeatNewPassword').dirty&&_getPwdFormControl('repeatNewPassword').hasError('repeat')&&!_getPwdFormControl('repeatNewPassword').hasError('required')">与新密码不一致!</div>
            </div>
          </div>
          <!-- 按钮 -->
          <div nz-form-item nz-row>
            <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
              <button nz-button [nzSize]="'large'" [nzType]="'primary'">确认</button>
            </div>
          </div>
        </form>
      </div>
    </nz-tab>
    <!-- 修改用户名 -->
    <nz-tab>
        <ng-template #nzTabHeading>
          <div class="title">修改用户名</div>
        </ng-template>
        <div>
          <form class="pwdForm" nz-form [formGroup]="_usernameValidForm" (ngSubmit)="_submitForm_username()">
            <!-- 用户名 -->
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                <label for="username" nz-form-item-required>新用户名</label>
              </div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                <nz-input [nzSize]="'large'" [nzType]="'password'" formControlName="username" [nzId]="'username'"></nz-input>
                <div nz-form-explain *ngIf="_getUsrNameFormControl('username').dirty&&_getUsrNameFormControl('username').hasError('required')">请输入用户名!</div>
              </div>
            </div>
            <!-- 按钮 -->
            <div nz-form-item nz-row>
              <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
                <button nz-button [nzSize]="'large'" [nzType]="'primary'">确认</button>
              </div>
            </div>
          </form>
        </div>
      </nz-tab>
  </nz-tabset>
</div>